<!--
 * @Author: 李荣辉
 * @Date: 2025-03-26 17:11:25
 * @LastEditTime: 2025-03-30 09:23:23
 * @FilePath: /haiyang-ui/src/views/haiyang/train/ImportantTargetAnalasysPage.vue
-->
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="">
    <div class="container1">
      <el-card class="mb-6">
        <span class="text-lg font-medium mb-3">模块简介：</span>
        <span class="text-gray-600 leading-relaxed mt-8">
          选取适合时间序列分析神经网络或区域平均等适用方法，对重点保障目标的风场数值预报结果进行智能订正，提高海面风场预报精度。
        </span>
      </el-card>
      <el-card class="mb-6">
        <div class="flex items-center justify-between">
          <span class="text-lg font-medium">智能订正程序</span>
          <div class="flex items-center space-x-4">
            <el-button
              :type="downloadStatus === 'running' ? 'danger' : 'primary'"
              class="!rounded-button whitespace-nowrap"
              size="small"
              @click="toggleDownload"
            >
              <i
                class="el-icon-video-play"
                v-if="downloadStatus !== 'running'"
              ></i>
              <i class="el-icon-video-pause" v-else></i>
              {{ downloadStatus === "running" ? "停止执行" : "开始执行" }}
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card
        class="h-full"
        :body-style="{
          height: '100%',
          width: '100%',
        }"
      >
        <div class="flex flex-1 flex-col">
          <div class="flex items-center justify-between mb-6">
            <div class="items-center flex flex-row">
              <span class="text-gray-600 flex-shrink-0">台风编号：</span>

              <el-input
                v-model="typhoonNum"
                placeholder="如：202401"
                size="small"
              ></el-input>
            </div>
            <div class="flex items-center space-x-4">
              <el-button type="primary" @click="handleSearch" size="small">
                <i class="el-icon-search"></i>查询
              </el-button>
              <el-button @click="handleReset" size="small">
                <i class="el-icon-refresh"></i>重置
              </el-button>
            </div>
          </div>

          <div
            class="w-full aspect-[16/9] bg-gray-100 rounded-lg flex items-center justify-center mt-10 p-10"
            style="height: 60vh"
          >
            <div
              v-if="files.length"
              class="w-full h-full flex items-center justify-center"
            >
              <!-- 照片墙 -->
              <div class="flex-1 grid grid-cols-5 gap-10 p-4">
                <div
                  v-for="(file, index) in files"
                  :key="index"
                  class="group cursor-pointer transition-all duration-300 hover:scale-[1.02]"
                >
                  <div
                    class="aspect-square bg-gray-100 rounded-lg overflow-hidden shadow-sm"
                  >
                    <img
                      :src="file.previewImage || previewImage"
                      class="w-full h-full object-cover hover:opacity-90 transition-opacity"
                      alt="台风数据"
                    />
                  </div>
                  <div class="mt-2 text-center">
                    <span
                      class="text-gray-600 text-sm font-medium line-clamp-2"
                    >
                      {{ file.name.replace(/_/g, " ") }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center">
              <i class="el-icon-picture text-gray-400 text-6xl mb-4"></i>
              <p class="text-gray-500">暂无数据</p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typhoonNum: "",
      total: 50,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      activeTab: "chart",
      downloadStatus: "stopped",
      previewImage:
        "https://n.sinaimg.cn/sinakd20230724s/540/w932h1208/20230724/7bdb-e74441c4b7165abd4090c99a1d0d45c1.png",

      selectedDate: new Date(),
      timeOptions: Array.from({ length: 24 }, (_, i) =>
        i.toString().padStart(2, "0")
      ),

      files: Array.from({ length: 0 }, (_, index) => ({
        name: `再分析气象数据_${2023 - Math.floor(index / 12)}`,
      })),
    };
  },
  methods: {
    toggleDownload() {
      this.downloadStatus =
        this.downloadStatus === "running" ? "stopped" : "running";
    },
    handleSearch() {
      console.log("Search clicked");
    },
    handleReset() {},
  },
};
</script>

<style scoped>
.container1 {
  height: calc(100vh - 70px);
}

.el-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
